<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    unmount-on-close
    :title="isEdit ? '编辑' : '新增'"
    @ok="submit"
    @cancel="handleCancel"
  >
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item
          field="name"
          label="零件名称"
          :rules="[{ required: true, message: '请输入零件名称' }]"
        >
          <a-input v-model="form.name" placeholder="请输入零件名称" />
        </a-form-item>

        <a-form-item
          field="material"
          label="材质"
          :rules="[{ required: true, message: '请选择材质' }]"
        >
          <a-select
            v-model="form.material"
            :style="{ width: '320px' }"
            placeholder="Please select ..."
          >
            <a-option :value="1">铝</a-option>
            <a-option :value="2">铜</a-option>
            <a-option :value="3">铁</a-option>
          </a-select>
        </a-form-item>

        <a-form-item
          field="process_type"
          label="加工性质 "
          :rules="[{ required: true, message: '请选择加工性质' }]"
        >
          <a-select
            v-model="form.process_type"
            :style="{ width: '320px' }"
            placeholder="Please select ..."
          >
            <a-option :value="1">标准件</a-option>
            <a-option :value="2">钣金</a-option>
            <a-option :value="3">机加工</a-option>
            <a-option :value="4">亚克力</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="isEdit"
          field="external_price"
          label="对外报价"
          :rules="[{ required: true, message: '请输入对外报价（单位分）' }]"
        >
          <a-input
            v-model="form.external_price"
            placeholder="请输入对外报价（单位分）"
          />
        </a-form-item>
        <a-form-item
          v-if="isEdit"
          field="cost_price"
          label="成本价"
          :rules="[{ required: true, message: '请输入成本价（单位分）' }]"
        >
          <a-input
            v-model="form.cost_price"
            placeholder="请输入成本价（单位分）"
          />
        </a-form-item>
        <a-form-item
          v-if="isEdit"
          field="buy_address"
          label="购买地址"
          :rules="[{ required: true, message: '请输入购买地址' }]"
        >
          <a-input v-model="form.buy_address" placeholder="请输入购买地址" />
        </a-form-item>

        <a-form-item
          v-if="isEdit"
          field="is_aftersale_part"
          label="是否售后配件 "
          :rules="[{ required: true, message: '请选择售后配件' }]"
        >
          <a-select
            v-model="form.is_aftersale_part"
            :style="{ width: '320px' }"
            placeholder="请选择售后配件"
          >
            <a-option :value="0">否</a-option>
            <a-option :value="1">是</a-option>
          </a-select>
        </a-form-item>

        <a-form-item
          v-if="isEdit"
          field="remark"
          label="备注"
          :rules="[{ required: true, message: '请输入备注' }]"
        >
          <a-input v-model="form.remark" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref, watch, computed, defineProps } from 'vue';
  import { FieldRule, Message } from '@arco-design/web-vue';
  import { addPartInfo, editPartInfo } from '@/api/part';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Number,
      default: 1,
    },
    refreshList: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const formRef = ref();

  const initData = () => {
    return {
      name: 'eeeeeeee',
    };
  };

  const form = ref(props.formData);
  console.log(form);
  const selected = ref(props.selected);
  console.log(selected);

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();
  const formVisible = ref(false);

  // 判断是编辑还是新增
  console.log(form.value.id);
  const isEdit = computed(() => !!form.value.id);
  console.log(isEdit);

  const submit = async () => {
    formVisible.value = true;
    const validate = await formRef.value.validate();
    console.log(formRef.value);
    console.log(validate);

    if (!validate) {
      console.log(isEdit.value);
      if (isEdit.value) {
        console.log(form.value);
        console.log(selected);
        const data = {
          id: form.value.id,
          cat_second_id: selected.value,
          name: form.value.name,
          material: form.value.material,
          process_type: form.value.process_type,
          external_price: form.value.external_price,
          cost_price: form.value.cost_price,
          buy_address: form.value.buy_address,
          is_aftersale_part: form.value.is_aftersale_part,
          remark: form.value.remark,
        };
        console.log(data);
        await editPartInfo(data).then((res: any) => {
          if (res.code === 200) {
            Message.success('修改成功');
          }
        });
      } else {
        const data = {
          cat_second_id: selected.value,
          name: form.value.name,
          material: form.value.material,
          process_type: form.value.process_type,
        };

        await addPartInfo(data).then((res: any) => {
          if (res.code === 200) {
            Message.success('添加成功');
          } else {
            Message.error('添加失败');
          }
        });
      }
      form.value = { ...initData };
      formVisible.value = false;
      emit('refresh');
    }
  };

  const handleCancel = () => {
    formVisible.value = false;
    form.value = { ...initData };
  };

  watch(
    () => formVisible.value,
    (val) => {
      emit('update:visible', val);
    }
  );

  watch(
    () => props.visible,
    (val) => {
      formVisible.value = val;
    }
  );

  watch(
    () => props.formData,
    (val) => {
      form.value = val;
    }
  );
  watch(
    () => props.selected,
    (val) => {
      selected.value = val;
    }
  );
</script>
